<template>
  <div class="index-bar">
    <div class="bottom-tab-bar bg-light text-dark container-fluid"
         v-if="isRender">
      <b-row>
        <b-col :class="{ 'text-success': curIndex === 0 }"
               @click="hrefTo('/life', 0)">
          <!-- <font-awesome-icon icon="home" /> -->
          <svg class="icon"
               aria-hidden="true">
            <use xlink:href="#icon-shenghuo1"></use>
          </svg>
          <span>生活</span>
        </b-col>
        <b-col :class="{ 'text-success': curIndex === 1 }"
               @click="hrefTo('/Property', 1)">
          <!-- <font-awesome-icon icon="chalkboard-teacher" /> -->
          <svg class="icon"
               aria-hidden="true">
            <use xlink:href="#icon-wuyefuwu-copy"></use>
          </svg>
          <span>物业</span>
        </b-col>
        <b-col :class="{ 'text-success': curIndex === 2 }"
               @click="hrefTo('/Community', 2)">
          <!-- <font-awesome-icon icon="comment" /> -->
          <svg class="icon"
               aria-hidden="true">
            <use xlink:href="#icon-shequ1-copy-copy"></use>
          </svg>
          <span>社区</span>
        </b-col>
        <b-col :class="{ 'text-success': curIndex === 3 }"
               @click="hrefTo('/Mine', 3)">
          <!-- <font-awesome-icon icon="comment" /> -->
          <svg class="icon"
               aria-hidden="true">
            <use xlink:href="#icon-gerenziliao"></use>
          </svg>
          <span>我的</span>
        </b-col>
      </b-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      curIndex: 1,
      isRender: this.$route.path
    }
  },
  methods: {
    hrefTo (path, index) {
      // 捕获多次点击路由的异常
      this.$router.push(path).catch(err => err)
      this.curIndex = index
    }
  },
  watch: {
    $route (to) {
      if (to.fullPath === '/Property' ||
        to.fullPath === '/Community' ||
        to.fullPath === '/life' ||
        to.fullPath === '/Mine') {
        this.isRender = true
      } else {
        this.isRender = false
      }
    }
  }
}
</script>

<style scoped>
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  font-size: 0.8rem;
  text-align: center;
}

.col {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding-top: 0.5rem;
  padding-bottom: 0.4rem;
}
.text-success {
  color: #4682b4 !important;
  font-weight: bold !important;
}
.text-dark {
  color: #778899 !important;
}
svg {
  margin: 0 auto;
}
.icon {
  font-size: 220%;
}
/* 防止列表多项时最后一项被导航栏挡住 */
.index-bar {
  margin-top: 50px;
}

/* 响应式 */
@media (min-width: 270px) and (max-width: 575.98px) {
  .text-dark {
    font-size: 15px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .text-dark {
    font-size: 26px;
  }
}
@media (min-width: 767px) and (max-width: 991.98px) {
  .text-dark {
    font-size: 28px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .text-dark {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .text-dark {
    font-size: 32px;
  }
}
</style>
